<template>
  <div>
    <div>
      <h1>传入dom生成pdf，可自定义页眉，页脚。详细使用方式参考README.md</h1>
      <h2>gitee地址：https://gitee.com/lin_peng118/generate-pdf</h2>
      <div>
        操作方式：
        <el-button type="primary" @click="toPreviewPdf">预览PDF</el-button>
        <el-button type="primary" @click="toGeneratePdf">生成PDF</el-button>
      </div>
    </div>
    <generate-pdf
      ref="generatePdf"
      header-class="header-page"
      footer-class="footer-page"
      :config="config"
    >
      <div slot="header" style="background-color: bisque;">
        页眉
        <div class='header-page'>       
        </div>        
      </div>
      <div slot="footer" style="background-color: #8a2be2; text-align: center;">
         第
        <span class='footer-page'></span>
        页
      </div>
      <div v-for="(item, index) in defaultExample" :key="index">
        <p style="margin-bottom: 20px;">
          {{
            item[0]
          }}
        </p>
        <p>
          {{
            item[1]
          }}
        </p>
      </div>
    </generate-pdf>
  </div>
</template>
<script>
  import GeneratePdf from '../main';
  export default {
    name: 'App',
    components: {
      GeneratePdf
    },
    data() {
      return {
        config: {
          type: 'A4',
          direction: 'Vertical',
          bottomDistance: 5,
          pageBreakClass: 'page-break', // 分页标记 传入class名，如果有值，则按照class名来分页，如果无值，则按照mode属性来分页
          mode: 'auto',
          autoDownload: true
        },
        defaultExample: [
          [
            '分区雪松爸爸的雄花开放了，他静静地等待着雪松妈妈开花。天气渐凉，雪松妈妈也开了一串串的花。但是雪松夫妇有点儿担忧，因为必须把雄花上的花粉传到雌花的柱头上才能结出果实宝宝。',
            '恰好，一群蜜蜂飞来。雪松夫妇请蜜蜂帮他们传粉。“你们有花蜜吗？”领头的蜜蜂直截(jié)了当地问。“没有。”他们不好意思地低下了头。领头的蜜蜂见状，带着蜂群头也不回地飞走了。不久，一群大黄蜂飞来。他们恳请大黄蜂帮忙传粉。“你们有花蜜吗？”大黄蜂毫不客气地问。“我没有花蜜，不过我的花粉很轻，你一下子就能传到雌花上……”雪松爸爸的话还没说完，大黄蜂就消失得无影无踪。'
          ],
          [
            '分区雪松爸爸的雄花开放了，他静静地等待着雪松妈妈开花。天气渐凉，雪松妈妈也开了一串串的花。但是雪松夫妇有点儿担忧，因为必须把雄花上的花粉传到雌花的柱头上才能结出果实宝宝。',
            '恰好，一群蜜蜂飞来。雪松夫妇请蜜蜂帮他们传粉。“你们有花蜜吗？”领头的蜜蜂直截(jié)了当地问。“没有。”他们不好意思地低下了头。领头的蜜蜂见状，带着蜂群头也不回地飞走了。不久，一群大黄蜂飞来。他们恳请大黄蜂帮忙传粉。“你们有花蜜吗？”大黄蜂毫不客气地问。“我没有花蜜，不过我的花粉很轻，你一下子就能传到雌花上……”雪松爸爸的话还没说完，大黄蜂就消失得无影无踪。'
          ],
          [
            '分区雪松爸爸的雄花开放了，他静静地等待着雪松妈妈开花。天气渐凉，雪松妈妈也开了一串串的花。但是雪松夫妇有点儿担忧，因为必须把雄花上的花粉传到雌花的柱头上才能结出果实宝宝。',
            '恰好，一群蜜蜂飞来。雪松夫妇请蜜蜂帮他们传粉。“你们有花蜜吗？”领头的蜜蜂直截(jié)了当地问。“没有。”他们不好意思地低下了头。领头的蜜蜂见状，带着蜂群头也不回地飞走了。不久，一群大黄蜂飞来。他们恳请大黄蜂帮忙传粉。“你们有花蜜吗？”大黄蜂毫不客气地问。“我没有花蜜，不过我的花粉很轻，你一下子就能传到雌花上……”雪松爸爸的话还没说完，大黄蜂就消失得无影无踪。'
          ],
          [
            '分区雪松爸爸的雄花开放了，他静静地等待着雪松妈妈开花。天气渐凉，雪松妈妈也开了一串串的花。但是雪松夫妇有点儿担忧，因为必须把雄花上的花粉传到雌花的柱头上才能结出果实宝宝。',
            '恰好，一群蜜蜂飞来。雪松夫妇请蜜蜂帮他们传粉。“你们有花蜜吗？”领头的蜜蜂直截(jié)了当地问。“没有。”他们不好意思地低下了头。领头的蜜蜂见状，带着蜂群头也不回地飞走了。不久，一群大黄蜂飞来。他们恳请大黄蜂帮忙传粉。“你们有花蜜吗？”大黄蜂毫不客气地问。“我没有花蜜，不过我的花粉很轻，你一下子就能传到雌花上……”雪松爸爸的话还没说完，大黄蜂就消失得无影无踪。'
          ],
          [
            '分区雪松爸爸的雄花开放了，他静静地等待着雪松妈妈开花。天气渐凉，雪松妈妈也开了一串串的花。但是雪松夫妇有点儿担忧，因为必须把雄花上的花粉传到雌花的柱头上才能结出果实宝宝。',
            '恰好，一群蜜蜂飞来。雪松夫妇请蜜蜂帮他们传粉。“你们有花蜜吗？”领头的蜜蜂直截(jié)了当地问。“没有。”他们不好意思地低下了头。领头的蜜蜂见状，带着蜂群头也不回地飞走了。不久，一群大黄蜂飞来。他们恳请大黄蜂帮忙传粉。“你们有花蜜吗？”大黄蜂毫不客气地问。“我没有花蜜，不过我的花粉很轻，你一下子就能传到雌花上……”雪松爸爸的话还没说完，大黄蜂就消失得无影无踪。'
          ],
          [
            '分区雪松爸爸的雄花开放了，他静静地等待着雪松妈妈开花。天气渐凉，雪松妈妈也开了一串串的花。但是雪松夫妇有点儿担忧，因为必须把雄花上的花粉传到雌花的柱头上才能结出果实宝宝。',
            '恰好，一群蜜蜂飞来。雪松夫妇请蜜蜂帮他们传粉。“你们有花蜜吗？”领头的蜜蜂直截(jié)了当地问。“没有。”他们不好意思地低下了头。领头的蜜蜂见状，带着蜂群头也不回地飞走了。不久，一群大黄蜂飞来。他们恳请大黄蜂帮忙传粉。“你们有花蜜吗？”大黄蜂毫不客气地问。“我没有花蜜，不过我的花粉很轻，你一下子就能传到雌花上……”雪松爸爸的话还没说完，大黄蜂就消失得无影无踪。'
          ],
          [
            '分区雪松爸爸的雄花开放了，他静静地等待着雪松妈妈开花。天气渐凉，雪松妈妈也开了一串串的花。但是雪松夫妇有点儿担忧，因为必须把雄花上的花粉传到雌花的柱头上才能结出果实宝宝。',
            '恰好，一群蜜蜂飞来。雪松夫妇请蜜蜂帮他们传粉。“你们有花蜜吗？”领头的蜜蜂直截(jié)了当地问。“没有。”他们不好意思地低下了头。领头的蜜蜂见状，带着蜂群头也不回地飞走了。不久，一群大黄蜂飞来。他们恳请大黄蜂帮忙传粉。“你们有花蜜吗？”大黄蜂毫不客气地问。“我没有花蜜，不过我的花粉很轻，你一下子就能传到雌花上……”雪松爸爸的话还没说完，大黄蜂就消失得无影无踪。'
          ]
        ]
      }
    },
    methods: {
      toGeneratePdf() {
        this.$refs.generatePdf.generatePdf((data) => {
          const {
            process,
            status,
            totalPage,
            result
          } = data;
          // 生成数据 包含
          console.log(process, status, totalPage, result);
        }, {
          fileName: 'GeneratePdf插件',
          output: 'file' // blob | file
        })
      },
      toPreviewPdf() {
        this.$refs.generatePdf.previewPdf();
      }
    }
  }
</script>
